@import "common/common";
.dialog-layout{
	position: fixed;
	top: 0;
	bottom:0;
	left: 0;
	right: 0;
	z-index: 99;
	background-color: rgba(0,0,0,0);
	@include transition(all linear 0.2s);
	&.show{
		background-color: rgba(0,0,0,0.5);
		.dialog-modal{
			@include transform(scale(1) translate(-50%,-50%));
		}
	}
	.dialog-modal{
		position: fixed;
		top: 50%;
		left: 50%;
		width: 85%;
		z-index: 99;
		background-color: #fff;
		@include transform-origin(0,0);
		@include transform(scale(0) translate(-50%,-50%));
		border-radius: rem(5);
		@include transition(transform linear 0.2s);
		&.dialog-alert{
			.dialog-content{
				padding:rem(30) rem(20);
			}
		}
		.dialog-content{
			padding:rem(20);
			font-size: rem(16);
			color: #666666;
			line-height: rem(22);
			text-align: center;
			&.dialog-has-title{
				padding-top: rem(10);
			}
		}
		.dialog-title{
			@include display-flex;
			@include justify-content(center);
			@include align-items(center);
			padding: rem(5) rem(10) 0;
			height: rem(50);
			font-size: rem(18);
			color: #666666;
			text-align: center;
			.text{
				@include font-family("medium");
			}
		}

		.dialog-footer{
			@include display-flex;
			position: relative;
			height: rem(50);

			&:before{
				content: " ";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 1px;
				background-color: #cdcdcd;
				@include transform(scaleY(0.5));
			}
			a{
				position: relative;
				@include flex(1);
				line-height: rem(50);
				font-size: rem(15);
				color: #999999;
				text-align: center;
				&:after{
					content: " ";
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					width: 1px;
					background-color: #cdcdcd;
					@include transform(scaleX(0.5));
				}
				&:last-child{
					&:after{
						width: 0;
					}
				}
				&.ok-btn{
					color: #641A83;
				}
			}

		}
	}
}